﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="~/Areas/Back/lib/layui/css/layui.css">
    <script src="~/Areas/Back/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
    <!--onsubmit="return false":禁止form提交数据-->
    <form class="layui-form" onsubmit="return false" style="margin-top: 50px;">
        <div class="layui-form-item">
            <!--标题-->
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <input type="text" id="name" class="layui-input" />
            </div>
            <!--点击搜索，重新加载了一次表格reload-->
            <button id="search" data-type="reload" class="layui-btn">搜索</button>
        </div>
    </form>
    <table id="my_table" lay-filter="mjf"></table>
    <!--顶部工具栏-->
    <script type="text/html" id="top_tool">
        <button class="layui-btn" lay-event="create">新建分类</button>
    </script>
    <!--行内工具-->
    <script type="text/html" id="inline_tool">
        <button class="layui-btn layui-btn-sm layui-icon layui-icon-edit" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm layui-icon layui-icon-delete layui-btn-danger" lay-event="del">删除</button>
    </script>
</body>
<script src="~/Areas/Back/js/Date.js"></script>
<script>
    layui.use(['table',], function () {
        var table = layui.table;
        var $ = layui.$;
        var layer = layui.layer;
        table.render({
            elem: "#my_table",
            url: "getNewsType", //请求地址  控制器的地址
            method: "post", //请求方式
            toolbar: "#top_tool", //挂载上顶部工具栏
            page: true, //是否开启分页limit：每页数据条数 page：当前第几页
            cols: [[{
                type: 'checkbox'
            }, {
                field: 'Name',
                title: '标题'
            }, {
                fixed: 'right',
                title: '操作',
                toolbar: "#inline_tool"
            }]]
        });
        //搜索
        var active = {
            reload: function () {
                //重新加载哪个表格
                table.reload('my_table', {
                    where: {
                        name: $("#name").val()
                    }
                })
            }
        };
        //点击谁的时候重载表格
        $("#search").click(function () {
            //点击搜索的时候重新加载表格
            var type = $(this).data('type'); //获取此按钮的data-type
            //如果type不为空，点击此按钮进行重新加载
            active[type] ? active[type].call(this) : '';
        });
        //监听顶部工具栏的点击
        table.on('toolbar(mjf)', function (obj) {
            if (obj.event == "create") {
                //创建用户 message缩写，信息的意思
                layer.open({
                    type: 2,
                    area: ['600px', '600px'],
                    content: 'Add' //这里content是一个普通的String
                });
            }
        });
        //监听行内工具点击
        table.on('tool(mjf)', function (obj) {
            console.log(obj);
            //拿这一行的数据
            var data = obj.data;
            if (obj.event == "edit") {
                layer.open({
                    type: 2,
                    area: ['600px', '600px'],
                    content: 'Edit?Id=' + data.Id //这里content是一个普通的String
                });
            } else if (obj.event == "del") {
                layer.confirm("真的删除吗？", function (index) {
                    //点击确定执行删除操作，ajax请求，不跳页面
                    $.ajax({
                        url: "DelArt",
                        type: "post",
                        dataType: "json",
                        data: {
                            Id: data.Id
                        },
                        success: function (res) {
                            //删除成功，关闭当前弹框
                            if (res.success == true) {
                                //关闭弹窗
                                layer.close(index);
                                //刷新当前页面
                                location.reload();
                            } else {
                                layer.msg(res.msg);
                            }

                        },
                        error: function (e) {
                            console.log(e);
                        }
                    })

                });
            }
        });

    });
</script>
</html>
